<!-- 
    图表无缝滚动
 -->

<template>
  <div class="container">
    <vue-seamless-scroll
      :data="listData"
      :class-option="optionSetting"
      class="wrap"
    >
      <ul class="ul-item">
        <li class="li-item" v-for="(item, index) in listData" :key="index"></li>
      </ul>
    </vue-seamless-scroll>
  </div>
</template>

<script>
import vueSeamlessScroll from "vue-seamless-scroll";

export default {
  name: "scrollPie",
  components: {
    vueSeamlessScroll,
  },
  data() {
    return {
      listData: [
        { name: 'Chart 1', data: [335,310,234,345,245] },
        { name: 'Chart 2', data: [234,456,321,368,333] },
        { name: 'Chart 3', data: [113,324,543,356,457] },
        { name: 'Chart 4', data: [421,342,564,589,875] },
        { name: 'Chart 5', data: [234,345,235,345,456] },
        { name: 'Chart 6', data: [431,532,476,234,524] }
      ],
    };
  },

  computed: {
    optionSetting(){
      return {
        step: 1,
        limitMoveNum: 6,
        hoverStop: true,
        direction: 2,
        openWatch: true,
        singleWidth: 0,
        singleHeight: 0,
        waitTime: 1000
      }
    }
  },

  methods: {
    drawChart(dom, index) {
      let myChart = echarts.init(dom);
      let data = this.listData[index]?.data;
      myChart.setOption({
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          left: 10,
          data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
          textStyle: {
            color: "#ffffff",
          },
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "30",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: data[0], name: "直接访问" },
              { value: data[1], name: "邮件营销" },
              { value: data[2], name: "联盟广告" },
              { value: data[3], name: "视频广告" },
              { value: data[4], name: "搜索引擎" },  
            ],
          },
        ],
      });
    },

  },
  mounted() {
    document.querySelectorAll(".li-item").forEach((dom, index) => {
        this.drawChart(dom,index);
      });
  },
};
</script>

<style lang="scss" scoped>
.container {
  overflow: hidden;
  display: block;
  cursor: default;
  z-index: 0;
  margin-top: 100px;
  .wrap {
    width: 750px;
    height: 210px;
    margin: 0 auto;
    overflow: hidden;
    ul {
      list-style: none;
      padding: 0;
      margin: 0 auto;
      &.ul-item {
        display: flex;
        .li-item {
          width: 240px;
          height: 200px;
          margin-right: 10px;
          border: 2px solid rgba(92, 255, 255, 0.1);

          background: rgba(10, 106, 255, 0.1) url(../../assets/img/wg.png)
            repeat 50% 50% !important;
        }
      }
    }
  }
}
</style>
